<template>
    <div class="addGoods-container">
        <b-container class="bv-example-row row-box">
            <!-- 步骤条 -->
            <Steps :current="current">
                <Step title="求购商品信息" icon="ios-information-circle"></Step>
                <Step title="求购商品图片" icon="md-images"></Step>
                <Step title="发布求购商品" icon="ios-send"></Step>
            </Steps>
            <!-- 求购商品信息表单区域 -->
            <b-row class="my-goodsInfo">
                <b-col cols="12" sm="12" md="12" lg="12">
                    <div class="goodInfo">
                        <div class="tip-info">
                            <h5>求购商品图片</h5>
                            <p><Icon type="md-bulb" /> 裁剪区域可以通过鼠标滚轮调节背景图大小</p>
                            <p><Icon type="md-bulb" /> 封面和其他图片分开上传哦（图片大小默认400 * 300）</p>
                            <p><Icon type="md-bulb" /> 最多上传8张图片哦</p>
                        </div>
                        <Divider orientation="left">封面图片</Divider>
                        <!-- 封面图片列表 -->
                        <b-row class="img-list">
                            <b-col cols="6" sm="6" md="4" lg="2" v-for="(item,i) in imgList" :key="i">
                                <div class="img-item">
                                    <img :src="item.wgpAddress" alt="">
                                    <a href="javascript:void(0);" class="del"
                                    @click.prevent="del(item.wgpId, i)"><Icon type="md-trash" /></a>
                                </div>
                            </b-col>
                            <!-- 上传封面图片组件 -->
                            <b-col cols="6" sm="6" md="4" lg="2" v-if="imgList.length==0">
                                <div class="upload-file">
                                    <form enctype="multipart/form-data">
                                        <ImgCutter class="my-file"
                                            :boxWidth="700"
                                            :boxHeight="470"
                                            :cutWidth="380"
                                            :cutHeight="430"
                                            :sizeChange="false"
                                            v-on:cutDown="cutDown">
                                            <button slot="open">
                                                <Icon type="ios-cloud-upload" size="43" style="color: #3399ff"></Icon>
                                                <p>选择图片</p>
                                            </button>
                                        </ImgCutter>
                                    </form>
                                </div>
                            </b-col>
                        </b-row>
                        <Divider orientation="left">其他图片</Divider>
                        <!-- 其他图片列表 -->
                        <b-row class="img-list">
                            <b-col cols="6" sm="6" md="4" lg="2" v-for="(item,i) in otherImgList" :key="i">
                                <div class="img-item">
                                    <img :src="item.wgpAddress" alt="">
                                    <a href="javascript:void(0);" class="del"
                                    @click.prevent="delOther(item.wgpId, i)"><Icon type="md-trash" /></a>
                                </div>
                            </b-col>
                            <!-- 上传其他图片组件 -->
                            <b-col cols="6" sm="6" md="4" lg="2" v-if="otherImgList.length<=8">
                                <div class="upload-file">
                                    <form enctype="multipart/form-data">
                                        <ImgCutter class="my-file"
                                            :boxWidth="700"
                                            :boxHeight="470"
                                            :cutWidth="380"
                                            :cutHeight="430"
                                            :sizeChange="false"
                                            v-on:cutDown="cutDownOther">
                                            <button slot="open">
                                                <Icon type="ios-cloud-upload" size="43" style="color: #3399ff"></Icon>
                                                <p>选择图片</p>
                                            </button>
                                        </ImgCutter>
                                    </form>
                                </div>
                            </b-col>
                        </b-row>
                        <Button type="primary" @click="save">保存</Button>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>

// eslint-disable-next-line import/no-extraneous-dependencies
import ImgCutter from 'vue-img-cutter'

export default {
  name: 'updateWantGoodImgs',
  data () {
    return {
      current: 2,
      wgId: this.$route.params.wgId,
      imgList: [], // 封面图片
      otherImgList: [] // 其他图片
    }
  },
  created () {
    this.findMainPic()
    this.findOtherPic()
  },
  methods: {
    // 根据求购商品id查询此求购商品的主图封面
    findMainPic () {
      this.$axios({
        url: 'wantGoodsPicture/findMainPicByGoodsId/' + this.wgId,
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          if (res.data.object !== '') {
            this.imgList.push({
              wgpId: res.data.object.wgpId,
              wgpAddress: res.data.object.wgpAddress
            })
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据求购商品Id查询此求购商品的其他图片
    findOtherPic () {
      this.$axios({
        url: 'wantGoodsPicture/findByGoodsId/' + this.wgId,
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          if (res.data.list !== '') {
            res.data.list.forEach(item => {
              if (item.wgpIsCover === 0) {
                this.otherImgList.push({
                  wgpId: item.wgpId,
                  wgpAddress: item.wgpAddress
                })
              }
            })
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 点击裁剪封面图片确定按钮先上传图片到七牛云返回图片URL，然后新增图片
    cutDown (res) {
      const formData = new FormData()
      let file = res.file // 输出为file类型的文件对象
      formData.append('file', file)
      this.$axios({
        url: 'goodsPicture/saveImg',
        method: 'post',
        contentType: false,
        data: formData,
        processData: false,
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          // 得到图片url
          console.log(res.data.object)
          this.init(res.data.object)
          let data = []
          data.push({
            wgpWgid: this.wgId,
            wgpAddress: res.data.object,
            wgpIsCover: 1
          })
          // 新增封面图片
          this.$axios({
            url: 'wantGoodsPicture/save',
            method: 'post',
            dataType: 'json',
            data: JSON.stringify(data),
            headers: {
              Authorization: localStorage.getItem('token'),
              'Content-Type': 'application/json'
            }
          }).then(res => {
            if (res.data.code === 200) {
              console.log(res.data.msg)
            }
          })
            .catch(error => {
              console.log(error)
            })
        }
      })
        .catch(error => {
          console.log(error)
        })
    },
    // 初始化图片数组
    init (img) {
      this.imgList.push({
        wgpId: 0,
        wgpAddress: img
      })
    },
    // 删除封面图片指定图片
    del (id, i) {
      this.$axios({
        url: 'wantGoodsPicture/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.imgList.splice(i, 1)
        }
      })
        .catch(error => {
          console.log(error)
        })
    },
    // 点击裁剪其他图片确定按钮先上传图片到七牛云返回图片URL，然后新增图片
    cutDownOther (res) {
      const formData = new FormData()
      let file = res.file // 输出为file类型的文件对象
      formData.append('file', file)
      this.$axios({
        url: 'goodsPicture/saveImg',
        method: 'post',
        contentType: false,
        data: formData,
        processData: false,
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.object)
          this.initOther(res.data.object)
          let data = []
          data.push({
            wgpWgid: this.wgId,
            wgpAddress: res.data.object,
            wgpIsCover: 0
          })
          // 新增其他图片
          this.$axios({
            url: 'wantGoodsPicture/save',
            method: 'post',
            dataType: 'json',
            data: JSON.stringify(data),
            headers: {
              Authorization: localStorage.getItem('token'),
              'Content-Type': 'application/json'
            }
          }).then(res => {
            if (res.data.code === 200) {
              console.log(res.data.msg)
            }
          })
            .catch(error => {
              console.log(error)
            })
        }
      })
        .catch(error => {
          console.log(error)
        })
    },
    // 初始化其他图片数组
    initOther (img) {
      this.otherImgList.push({
        wgpId: 0,
        wgpAddress: img
      })
    },
    // 删除其他图片指定图片
    delOther (id, i) {
      this.$axios({
        url: 'wantGoodsPicture/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.otherImgList.splice(i, 1)
        }
      })
        .catch(error => {
          console.log(error)
        })
    },
    // 点击保存按钮根据求购图片id修改求购图片集
    save () {
      const data = [] // 求购图片对象数组
      data.push({
        wgpId: this.imgList[0].wgpId,
        wgpWgid: this.wgId,
        wgpAddress: this.imgList[0].wgpAddress,
        wgpIsCover: 1
      })
      this.otherImgList.forEach(item => {
        data.push({
          wgpId: item.wgpId,
          wgpWgid: this.wgId,
          wgpAddress: item.wgpAddress,
          wgpIsCover: 0
        })
      })
      this.$axios({
        url: 'wantGoodsPicture/updateById',
        method: 'post',
        dataType: 'json',
        data: JSON.stringify(data),
        headers: {
          Authorization: localStorage.getItem('token'),
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.data.code === 200) {
          let curId = this.wgId
          // 保存图片集成功跳转到商品详情页
          this.$router.push({ name: 'wantGoodsInfo', params: { curId } })
        }
      }).catch(error => {
        console.log(error)
      })
    }
  },
  components: {
    ImgCutter
  }
}
</script>
<style scoped>
.row-box{
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.goodInfo {
    min-height: 440px;
    padding: 20px;
}
.tip-info {
    margin-bottom: 20px;
}
.btn-info {
    margin-top: 20px;
}
.img-item {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    position: relative;
    margin-bottom: 15px;
}
.img-item img {
    width: 100%;
    height: 150px;
    border-radius: 10px;
}
.img-item a {
    display: block;
    padding: 1px 4px;
    font-size: 12px;
    border-radius: 5px;
    color:#fff;
    background-color: rgba(39, 39, 39, 0.3);
    position: absolute;
    top:5px;
    right:5px;
}
.upload-file {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
    border:1px solid #e0e0e0;
}
.my-file {
    width: 100%;
    height: 150px;
}
.my-file button {
    outline: 0;
    width: 100%;
    display: block;
    text-align: center;
    background: #fff;
    height: 150px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    font-size: 12px;
}
</style>
